<template>
  <div class="el-select orgset-treeselect">
    <treeselect
      v-bind="$attrs"
      :options="dataTrees"
      :searchable="true"
      :clearable="true"
      :disabled="!editable"
      :show-count="true"
      :disable-branch-nodes="false"
      :is-default-expanded="true"
      :normalizer="treeNormalizer"
      append-to-body
      z-index="100"
      placeholder="选择科目"
      @select="treeSelect"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  props: {
    valueField: {
      type: String,
      default: 'finCode',
      required: false
    },
    editable: {
      type: Boolean,
      default: true,
      required: false
    },
    dataTrees: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    treeNormalizer(node) {
      return {
        id: node[this.valueField],
        label: node.finName
      }
    },
    treeSelect(node, instanceId) {
    },
    refreshData() {
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.orgset-treeselect{
  height: 26px;
  line-height: 26px;
  vertical-align: bottom;
}
::v-deep .vue-treeselect__control {
  line-height: 26px;
  height: 26px;
}
</style>
